<link href="http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="all" href="<?php echo site_url() ?>assets/js/datepicker/daterangepicker-bs3.css" />
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="<?php echo site_url() ?>assets/js/datepicker/moment.js"></script>
<script type="text/javascript" src="<?php echo site_url() ?>assets/js/datepicker/daterangepicker.js"></script>
<style>#sidetabs_body_ {margin-left: 10px;}</style>
<script type="text/javascript">
$(function() {
 
    $('#dropup').val('<?php  echo $time?>');
    $('select[name="select_network"]').val('<?php  echo $group?>');
 
    $('#dropup').daterangepicker({
        format: 'DD/MM/YYYY',
        showDropdowns: true,
        ranges: {
           'Today': [moment(), moment()],
           'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
           'Last 7 Days': [moment().subtract(6, 'days'), moment()],
           'Last 30 Days': [moment().subtract(29, 'days'), moment()],
           'This Month': [moment().startOf('month'), moment().endOf('month')],
           'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        },
        buttonClasses: ['btn', 'btn-sm'],
        applyClass: 'btn-primary',
        cancelClass: 'btn-default',
        separator: '-',
        
    });
    
    $('#dropup').change(function() {
        var selectGroup=$('select[name="select_network"] :selected').val();
        var time = $('#dropup').val();
        var url = '<?php echo site_url().'device-report?id='.$deviceId;?>'+'&time='+time;
        window.location = url;
    });
    
    $(document).on('change','#select_network',function(){
        var selectGroup=$('select[name="select_network"] :selected').val();
        var time = $('#dropup').val();
         var url = '<?php echo site_url().'device-report?id='.$deviceId;?>'+'&time='+time;
        window.location = url;      
    });

});
</script>
                <div id="sidetabs_body_">
        
                    <div class='email_report_controls'>
                        <a href="#send_email_reports" role="button" class="btn" data-toggle="modal">Email this report</a>
                        <a href="#schedule_email_reports" role="button" class="btn" data-toggle="modal">Schedule report emails</a>
                    </div>
                    <table class="lean">
                        <tr class="base">
                            <td><h1 class="db" style="position: relative;top: -14px;padding-right: 10px;">Thống kê thiết bị</h1></td>
                            <td>
                                <div class="input-prepend input-group" style="  width: 220px;padding: 5px 0px 5px 5px;background-color: #f5f5f5;float: right;">
                                    <span class="add-on input-group-addon">
                                        <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
                                    </span>
                                    <input type="text" style="width: 200px" name="dropup" id="dropup" class="form-control" value="Chọn ngày tháng"> 
                                </div>
                            </td>
                            <td>
                                <div style="position: absolute;margin-top: 8px;margin-left: 20px;">
                                   
                                </div>
                            </td>
                            <td style='padding-left:10px;'><img alt="Loading..." id="loading_spinner" src="/test/images/spinner.gif" style="position:relative;display:none;" /></td>

                        </tr>
                    </table>
                    <h3><i class="mks-cli-wireless-off" title="Offline wireless client"></i> &nbsp;<?php echo $device->namedevice; ?></h3>
                    <h3 style="display:inline">Đã sử dụng</h3>
                    (Tổng <?php echo $totalBanwidth; ?>: &darr; <?php echo $totalDown; ?> &uarr; <?php echo $totalUp; ?></b>)
                    <div class="flotresizer" id="chartdiv1"  style="width:100%;height:315px;margin-top:1ex">
                        
                    </div>
                    <table class="lean" style="width:100%; margin-top:2ex">
                        <tr style="vertical-align:top">
                            <td><div style="padding-right:1em">

                                    <h1 class="summary_title">Người sử dụng </h1>
                                    (Tổng: <?php echo $totalClient; ?> người
                                    | Trung bình theo ngày: <?php echo $avgClient; ?> người)
                                    <hr class="summary_divider">
                                    <h3>Số người sử dụng trong 1 ngày</h3>

                                    <div class="flotresizer" id = "chartdiv" style="width: 100%;height: 300px;font-size: 11px;">
                                        <div id="clients_per_day_canvas" class="flotresizee"></div>
                                    </div>
                                    
                                    <h3>Top người sử dụng nhiều băng thông</h3>
                                    <div id="top_clients_by_usage" style="margin-top:-1ex"></div>
                                    <table class="filter compact fill">
                                        <thead>
                                            <tr class="ft_head">
                                                <th class="ft ftr  row_num ftlegend">#</th>
                                                <th class="ft ftl  description ftsortable">
                                        <table class="lean">
                                         <tbody>
                                                <tr style="vertical-align:bottom">
                                                    <td class="ftlegend">Tên user - Địa chỉ Mac</td>
                                                    <td style="padding:0 5px"></td>
                                                </tr>
                                         </tbody>
                                        </table>
                                        </th>
                                        <th class="ft ftr  amt_xfrd ftsortable">
                                        <table class="lean" style="margin:0 0 0 auto">
                                            <tbody>
                                                <tr style="vertical-align:bottom">
                                                    <td class="ftlegend">Đã sử dụng</td>
                                                    <td style="padding:0 0 2px"><!--<img src="/images/icon_arrow_down_10x10.png" title="Toggle sort order" alt="[Sorting down]" style="width:10px;height:10px"> --></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        </th>
                                        <th class="ft ftr  amt_xfrd_p ftsortable">
                                        <table class="lean" style="margin:0 0 0 auto">
                                            <tbody>
                                                <tr style="vertical-align:bottom">
                                                    <td style="padding:0 5px"></td>
                                                    <td class="ftlegend">% Đã sử dụng</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        </th>
                                        </tr>
                                        </thead>
                                        <tfoot>
                                            <tr class="ft_foot">
                                                <td class="ft_foot" colspan="4">
                                                    <table class="ft_foot">
                                                        <tfoot>
                                                            <tr class="ft_foot">
                                                                <td class="pgsel"><img src="/images/1x1.gif" alt="" style="visibility: hidden; height: 5px"></td>
                                                            </tr>
                                                        </tfoot>
                                                    </table>
                                                </td>
                                            </tr>
                                        </tfoot>
                                        <tbody>
                                             <?php $i = 1;foreach ($topClientNet as $value) {?>
                                            <tr <?php if ($i%2 == 1) {?>class ="ft0 ftp0" <?php }else{ ?>class="ft1 ftp0" <?php }?>>
                                                <td class="ft row_num ftr"><?php echo $i++; ?></td>
                                                <td class="ft name"><a href="<?php echo site_url() . 'customer-detail?id=' . md5($value['id']) . '&mac=' . $value['mac'] ;?>"><?php echo $value['name_user']==null?$value['mac']:$value['name_user']; ?></a></td>
                                                <td class="ft amt_xfrd ftr"><?php echo $value['total']; ?></td>
                                                <td class="ft amt_xfrd_p ftr"><?php echo $value['pct'];?>&nbsp;</td>
                                            </tr>
                                            <?php } ?>
                                        </tbody>
                                    </table>
                                    
                                    
                                    <h3>Top người thường xuyên dùng mạng</h3>
                                    <div id="top_applications_by_usage" style="margin-top:-1ex">
                                        <table class="filter compact fill">
   <colgroup>
      <col width="0*">
      <col>
      <col>
      <col>
   </colgroup>
   <thead>
      <tr class="ft_head">
         <th class="ft ftr  row_num ftlegend">#</th>
         <th class="ft ftl  application ftsortable">
            <table class="lean">
               <tbody>
                  <tr style="vertical-align:bottom">
                     <td class="ftlegend">Tên user - Địa chỉ Mac</td>
                     <td style="padding:0 5px"></td>
                  </tr>
               </tbody>
            </table>
         </th>
         <th class="ft ftr  amt_xfrd ftsortable">
            <table class="lean" style="margin:0 0 0 auto">
               <tbody>
                  <tr style="vertical-align:bottom">
                     <td class="ftlegend">Số lần sử dụng</td>
                     <td style="padding:0 0 2px"><!--<img src="/images/icon_arrow_down_10x10.png" title="Toggle sort order" alt="[Sorting down]" style="width:10px;height:10px"> --></td>
                  </tr>
               </tbody>
            </table>
         </th>
         <th class="ft ftr  amt_xfrd_p ftsortable">
            <table class="lean" style="margin:0 0 0 auto">
               <tbody>
                  <tr style="vertical-align:bottom">
                     <td style="padding:0 5px"></td>
                     <td class="ftlegend">% Sử dụng</td>
                  </tr>
               </tbody>
            </table>
         </th>
      </tr>
   </thead>
   <tfoot>
      <tr class="ft_foot">
         <td class="ft_foot" colspan="4">
            <table class="ft_foot">
               <tfoot>
                  <tr class="ft_foot">
                     <td class="pgsel"><img src="/images/1x1.gif" alt="" style="visibility: hidden; height: 5px"></td>
                  </tr>
               </tfoot>
            </table>
         </td>
      </tr>
   </tfoot>
   <tbody>
       <?php $i = 1;
       foreach ($topClientAccess as $value)
       { ?>
           <tr <?php if ($i%2 == 1) {?>class ="ft0 ftp0" <?php }else{ ?>class="ft1 ftp0" <?php }?>>
               <td class="ft row_num ftr"><?php echo $i++; ?></td>
               <td class="ft name"><a href="<?php echo site_url() . 'customer-detail?id=' . md5($value['id']) . '&mac=' . $value['mac'] ;?>"><?php echo $value['name_user'] == null ? $value['mac'] : $value['name_user']; ?></a></td>
               <td class="ft amt_xfrd ftr"><?php echo $value['number_time']; ?></td>
               <td class="ft amt_xfrd_p ftr"><?php echo $value['pct']; ?>&nbsp;%</td>
           </tr>
    <?php } ?>
   </tbody>
</table>
                                    </div>
                                    
                                    
                                    <div id="clients_by_manufacturer" style="margin-top:-1ex"></div>
                                    <br><br>

                                </div></td>

                            <td style="width:50%"><div style="padding-left:1em">
                                    <br><br>

                                    <h1 class="summary_title">Thiết bị sử dụng</h1><hr class="summary_divider">
                                    
                                    
                                    <h3>Top hệ điều hành được sử dụng nhiều nhất</h3>
                                    <div id="clients_by_os_fingerprint" style="margin-top:-1ex">
                                        <table class="filter compact fill">
   <colgroup>
      <col width="0*">
      <col>
      <col>
      <col>
      <col>
      <col>
   </colgroup>
   <thead>
      <tr class="ft_head">
         <th class="ft ftr  row_num ftlegend">#</th>
         <th class="ft ftl  os_fingerprint ftsortable">
            <table class="lean">
               <tbody>
                  <tr style="vertical-align:bottom">
                     <td class="ftlegend">OS</td>
                     <td style="padding:0 5px"></td>
                  </tr>
               </tbody>
            </table>
         </th>
         <th class="ft ftr  count ftsortable">
            <table class="lean" style="margin:0 0 0 auto">
               <tbody>
                  <tr style="vertical-align:bottom">
                     <td style="padding:0 5px"></td>
                     <td class="ftlegend"># Khách hàng</td>
                  </tr>
               </tbody>
            </table>
         </th>
         <th class="ft ftr  count_p ftsortable">
            <table class="lean" style="margin:0 0 0 auto">
               <tbody>
                  <tr style="vertical-align:bottom">
                     <td style="padding:0 5px"></td>
                     <td class="ftlegend">% Khách hàng</td>
                  </tr>
               </tbody>
            </table>
         </th>
         <th class="ft ftr  amt_xfrd ftsortable">
            <table class="lean" style="margin:0 0 0 auto">
               <tbody>
                  <tr style="vertical-align:bottom">
                     <td class="ftlegend">Đã sử dụng</td>
                     <td style="padding:0 0 2px"><!--<img src="/images/icon_arrow_down_10x10.png" title="Toggle sort order" alt="[Sorting down]" style="width:10px;height:10px"> --></td>
                  </tr>
               </tbody>
            </table>
         </th>
         <th class="ft ftr  amt_xfrd_p ftsortable">
            <table class="lean" style="margin:0 0 0 auto">
               <tbody>
                  <tr style="vertical-align:bottom">
                     <td style="padding:0 5px"></td>
                     <td class="ftlegend">% Đã sử dụng</td>
                  </tr>
               </tbody>
            </table>
         </th>
      </tr>
   </thead>
   <tfoot>
      <tr class="ft_foot">
         <td class="ft_foot" colspan="6">
            <table class="ft_foot">
               <tfoot>
                  <tr class="ft_foot">
                     <td class="pgsel"><img src="/images/1x1.gif" alt="" style="visibility: hidden; height: 5px"></td>
                  </tr>
               </tfoot>
            </table>
         </td>
      </tr>
   </tfoot>
   <tbody>
       <?php $i = 1;
       foreach ($topOs as $value)
       { ?>
           <tr <?php if ($i%2 == 1) {?>class ="ft0 ftp0" <?php }else{ ?>class="ft1 ftp0" <?php }?>>
               <td class="ft row_num ftr"><?php echo $i++; ?></td>
               <td class="ft name"><?php echo $value->osname; ?></td>
               <td class="ft amt_xfrd ftr"><a><?php echo $value->client; ?></a></td>
               <td class="ft amt_xfrd_p ftr"><?php echo $value->pct_client; ?>&nbsp;%</td>
               <td class="ft amt_xfrd ftr"><?php echo $value->total; ?></td>
               <td class="ft amt_xfrd_p ftr"><?php echo $value->pct_bw; ?>&nbsp;%</td>
           </tr>
    <?php } ?>
   </tbody>
</table>
                                    </div>
                                    
<!--                                    <h3>Top thiết bị sử dụng nhiều nhất</h3>
                                    <table class="filter compact fill">
   <colgroup>
      <col width="0*">
      <col>
      <col>
      <col>
      <col>
      <col>
   </colgroup>
   <thead>
      <tr class="ft_head">
         <th class="ft ftr  row_num ftlegend">#</th>
         <th class="ft ftl  manufacturer ftsortable">
            <table class="lean">
               <tbody>
                  <tr style="vertical-align:bottom">
                     <td class="ftlegend">Manufacturer</td>
                     <td style="padding:0 5px"></td>
                  </tr>
               </tbody>
            </table>
         </th>
         <th class="ft ftr  count ftsortable">
            <table class="lean" style="margin:0 0 0 auto">
               <tbody>
                  <tr style="vertical-align:bottom">
                     <td style="padding:0 5px"></td>
                     <td class="ftlegend"># Clients</td>
                  </tr>
               </tbody>
            </table>
         </th>
         <th class="ft ftr  count_p ftsortable">
            <table class="lean" style="margin:0 0 0 auto">
               <tbody>
                  <tr style="vertical-align:bottom">
                     <td style="padding:0 5px"></td>
                     <td class="ftlegend">% Clients</td>
                  </tr>
               </tbody>
            </table>
         </th>
         <th class="ft ftr  amt_xfrd ftsortable">
            <table class="lean" style="margin:0 0 0 auto">
               <tbody>
                  <tr style="vertical-align:bottom">
                     <td class="ftlegend">Usage</td>
                     <td style="padding:0 0 2px"><img src="/images/icon_arrow_down_10x10.png" title="Toggle sort order" alt="[Sorting down]" style="width:10px;height:10px"> </td>
                  </tr>
               </tbody>
            </table>
         </th>
         <th class="ft ftr  amt_xfrd_p ftsortable">
            <table class="lean" style="margin:0 0 0 auto">
               <tbody>
                  <tr style="vertical-align:bottom">
                     <td style="padding:0 5px"></td>
                     <td class="ftlegend">% Usage</td>
                  </tr>
               </tbody>
            </table>
         </th>
      </tr>
   </thead>
   <tfoot>
      <tr class="ft_foot">
         <td class="ft_foot" colspan="6">
            <table class="ft_foot">
               <tfoot>
                  <tr class="ft_foot">
                     <td class="pgsel"><img src="/images/1x1.gif" alt="" style="visibility: hidden; height: 5px"></td>
                  </tr>
               </tfoot>
            </table>
         </td>
      </tr>
   </tfoot>
   <tbody>
      <tr class="ft0">
         <td class="ft row_num ftr">1</td>
         <td class="ft manufacturer">Apple</td>
         <td class="ft count ftr">2997</td>
         <td class="ft count_p ftr">79.2%</td>
         <td class="ft amt_xfrd ftr">9.66&nbsp;TB</td>
         <td class="ft amt_xfrd_p ftr">80.4%</td>
      </tr>
      <tr class="ft1">
         <td class="ft row_num ftr">2</td>
         <td class="ft manufacturer">Intel</td>
         <td class="ft count ftr">157</td>
         <td class="ft count_p ftr">4.2%</td>
         <td class="ft amt_xfrd ftr">810.74&nbsp;GB</td>
         <td class="ft amt_xfrd_p ftr">6.6%</td>
      </tr>
      <tr class="ft0">
         <td class="ft row_num ftr">3</td>
         <td class="ft manufacturer">Hon Hai/Foxconn</td>
         <td class="ft count ftr">118</td>
         <td class="ft count_p ftr">3.1%</td>
         <td class="ft amt_xfrd ftr">476.22&nbsp;GB</td>
         <td class="ft amt_xfrd_p ftr">3.9%</td>
      </tr>
      <tr class="ft1">
         <td class="ft row_num ftr">4</td>
         <td class="ft manufacturer">Lite-On</td>
         <td class="ft count ftr">83</td>
         <td class="ft count_p ftr">2.2%</td>
         <td class="ft amt_xfrd ftr">396.74&nbsp;GB</td>
         <td class="ft amt_xfrd_p ftr">3.2%</td>
      </tr>
      <tr class="ft0">
         <td class="ft row_num ftr">5</td>
         <td class="ft manufacturer">Microsoft</td>
         <td class="ft count ftr">25</td>
         <td class="ft count_p ftr">0.7%</td>
         <td class="ft amt_xfrd ftr">129.02&nbsp;GB</td>
         <td class="ft amt_xfrd_p ftr">1.0%</td>
      </tr>
      <tr class="ft1">
         <td class="ft row_num ftr">6</td>
         <td class="ft manufacturer">Gemtek</td>
         <td class="ft count ftr">11</td>
         <td class="ft count_p ftr">0.3%</td>
         <td class="ft amt_xfrd ftr">66.39&nbsp;GB</td>
         <td class="ft amt_xfrd_p ftr">0.5%</td>
      </tr>
      <tr class="ft0">
         <td class="ft row_num ftr">7</td>
         <td class="ft manufacturer">Chicony Electronics</td>
         <td class="ft count ftr">11</td>
         <td class="ft count_p ftr">0.3%</td>
         <td class="ft amt_xfrd ftr">63.98&nbsp;GB</td>
         <td class="ft amt_xfrd_p ftr">0.5%</td>
      </tr>
      <tr class="ft1">
         <td class="ft row_num ftr">8</td>
         <td class="ft manufacturer">Murata Manufacturing</td>
         <td class="ft count ftr">30</td>
         <td class="ft count_p ftr">0.8%</td>
         <td class="ft amt_xfrd ftr">51.15&nbsp;GB</td>
         <td class="ft amt_xfrd_p ftr">0.4%</td>
      </tr>
      <tr class="ft0">
         <td class="ft row_num ftr">9</td>
         <td class="ft manufacturer">Samsung</td>
         <td class="ft count ftr">81</td>
         <td class="ft count_p ftr">2.1%</td>
         <td class="ft amt_xfrd ftr">49.24&nbsp;GB</td>
         <td class="ft amt_xfrd_p ftr">0.4%</td>
      </tr>
      <tr class="ft1">
         <td class="ft row_num ftr">10</td>
         <td class="ft manufacturer">AzureWaveTechnologies</td>
         <td class="ft count ftr">5</td>
         <td class="ft count_p ftr">0.1%</td>
         <td class="ft amt_xfrd ftr">39.97&nbsp;GB</td>
         <td class="ft amt_xfrd_p ftr">0.3%</td>
      </tr>
   </tbody>
</table>-->
                                </div></td>
                        </tr>
                    </table>
<!--                    <script src="/test/tablesorter/jquery.tablesorter.js" type="text/javascript"></script>
                    <script src="/test/tablesorter/jquery.tablesorter.min.js" type="text/javascript"></script>-->
                
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
<script src="http://www.amcharts.com/lib/3/themes/light.js"></script>
<script type="text/javascript">
    var chart = AmCharts.makeChart( "chartdiv", {
  "type": "serial",
  "theme": "light",
  "dataProvider": [ <?php foreach ($clientPerDay as $value){ ?>
        {
            "date": "<?php echo $value->date; ?>",
            "visits": <?php echo $value->client; ?>
        },
    <?php } ?>
    ],
  "valueAxes": [ {
    "gridColor": "#FFFFFF",
    "gridAlpha": 0.2,
    "dashLength": 0
  } ],
  "gridAboveGraphs": true,
  "startDuration": 1,
  "graphs": [ {
    "balloonText": "[[category]]: <b>[[value]]</b>",
    "fillAlphas": 0.8,
    "lineAlpha": 0.2,
    "type": "column",
    "valueField": "visits"
  } ],
  "chartCursor": {
    "categoryBalloonEnabled": false,
    "cursorAlpha": 0,
    "zoomable": false
  },
  "categoryField": "date",
  "categoryAxis": {
    "gridPosition": "start",
    "gridAlpha": 0,
    "tickPosition": "start",
    "tickLength": 30
  },
  "export": {
    "enabled": true
  },
//   "chartScrollbar": {
//                "graph": "g1",
//                "oppositeAxis": true,
//                "offset": 30,
//                "scrollbarHeight": 50,
//                "backgroundAlpha": 0,
//                "selectedBackgroundAlpha": 0.1,
//                "selectedBackgroundColor": "#888888",
//                "graphFillAlpha": 0,
//                "graphLineAlpha": 0.5,
//                "selectedGraphFillAlpha": 0,
//                "selectedGraphLineAlpha": 1,
//                "autoGridCount": true,
//                "color": "#AAAAAA"
//            },
     "chartScrollbar": {
        "scrollbarHeight": 5,
        "backgroundAlpha": 0.1,
        "backgroundColor": "#868686",
        "selectedBackgroundColor": "#67b7dc",
        "selectedBackgroundAlpha": 1
    },
    "categoryAxis": {
    "gridPosition": "start",
    "labelRotation": 10,
    "dataDateFormat": "DD/MM/YY",
    "title":"Bảng thống kê số người sử dụng mạng theo ngày",
 
    
  },        

} );
</script>
<?php // var_dump($bandwidthPerDay);die; ?>
<script type="text/javascript" >
    var chartData = generatechartData();

function generatechartData() {
    var chartData = [];
    var firstDate = new Date();
    firstDate.setDate(firstDate.getDate() - 150);

    for (var i = 0; i < 150; i++) {
        // we create date objects here. In your data, you can have date strings
        // and then set format of your dates using chart.dataDateFormat property,
        // however when possible, use date objects, as this will speed up chart rendering.
        var newDate = new Date(firstDate);
        newDate.setDate(newDate.getDate() + i);

        var visits = Math.round(Math.random() * 100 - 50);

        chartData.push({
            date: newDate,
            visits: visits
        });
    }
    return chartData;
}


var chart = AmCharts.makeChart("chartdiv1", {
    "theme": "dark",
    "type": "serial",
    "marginRight": 80,
    "autoMarginOffset": 20,    
    "marginTop":20,
    "dataProvider": [ <?php foreach ($bandwidthPerDay as $value){ ?>
        {
            "date": "<?php echo $value->date; ?>",
            "total": <?php echo $value->total; ?>,
            "type" :"<?php $ds = $fview->formatSizeUnitschart($value->total); echo $ds['amount'].' '.$ds['type'];?>",
        },
    <?php } ?>
    ],
    "graphs": [{
        "useNegativeColorIfDown": true,
        "balloonText": "[[category]]<br><b>[[type]]</b>",
        "bullet": "round",
        "bulletBorderAlpha": 1,
        "bulletBorderColor": "#FFFFFF",
        "hideBulletsCount": 50,
        "lineThickness": 2,
        "lineColor": "#fdd400",
        "negativeLineColor": "#67b7dc",
        "valueField": "total",
        "title": "red line",
    }],
    "valueAxes": [{              //trục oy
        "id": "v1",
        "axisAlpha": 0.1,
//        "title": "Băng thông sử dụng theo ngày",
        "positon": "right",
    }],
    "categoryAxis": {           //trục ox
//        "parseDates": true,
        "axisAlpha": 0,
        "minHorizontalGap": 60,
        "dataDateFormat": "DD/MM/YY",
        "title":"Bảng thống kê băng thông sử dụng theo ngày",
    },
    "chartScrollbar": {
        "scrollbarHeight": 5,
        "backgroundAlpha": 0.1,
        "backgroundColor": "#868686",
        "selectedBackgroundColor": "#67b7dc",
        "selectedBackgroundAlpha": 1
    },
    "chartCursor": {
        "valueLineEnabled": true,
        "valueLineBalloonEnabled": true
    },
    "categoryField": "date",
    "export": {
        "enabled": true
    },
    
});

//chart.addListener("dataUpdated", zoomChart);
////zoomChart();
//
//function zoomChart() {
//    if (chart.zoomToIndexes) {
//        chart.zoomToIndexes(130, chartData.length - 1);
//    }
//}
</script>
</div>



              